<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone,shown:ajax,dc:currentId==='DC',android:!isIphone}">
		<div class="line"></div>
		<div class="nav-bar">
			<!-- 关闭 -->
			<div class="arrow" @click="goBack" style="width:auto;">{{$t('redPackage7')}}</div>
			<!-- 红包记录 -->
			<div class="center" @click="iconShown=true">{{$t('redPackage8',{name:currentId})}}<img src="../../static/images/redpacket/arrow_down.png"></div>
			<div class="right"></div>
		</div>
		<div class="tab" :class="{iphoneX:isIphoneX,iphone:isIphone}" v-if="currentId != 'DC'">
			<!-- 抢到的红包 -->
			<span :class="{on:pageState==1}" @click="changeState(1)">{{$t('redPackage9')}}</span>
			<!-- 发出的红包 -->
			<span :class="{on:pageState==2}" @click="changeState(2)">{{$t('redPackage10')}}</span>
		</div>
		<div class="userInfo">
			<h1><img :src="head_img+'?imageView2/1/w/100/h/100'" alt=""></h1>
			<h2 v-if="pageState==1">{{$t('redPackage11',{userName:userName,currentId:currentId})}}</h2>
			<h2 v-if="pageState==2">{{$t('redPackage17',{userName:userName,currentId:currentId})}}</h2>
			<h3 v-if="pageState===1">
				{{currentId!='DC'?(typeof total1==='number'?total1.toFixed(currentId=='BTC'?8:2):total1):total1}}
			</h3>
			<h3 v-if="pageState===2">
				{{currentId != 'DC'?(typeof total2==='number'?total2.toFixed(currentId=='BTC'?8:2):total2):total2}}
			</h3>
			<div class="total-num" v-if="pageState===1">
				<!-- 抢到红包 -->
				<div class="left"><p>{{count}}</p><p><span>{{$t('redPackage12')}}</span></p></div>
				<!-- 手气最佳 -->
				<div class="right"><p>{{max_nums}}</p><p><span>{{$t('redPackage13')}}</span></p></div>
			</div>
		</div>
		<div class="list" :class="{noDataRedHistory:(list.length===0 && finished)}">
			<van-list
				v-model="loading"
  				:finished="finished"
  				:error.sync="loadError"
  				:offset="offset"
  				:error-text="$t('reloadText')"
  				:loading-text="$t('loading')"
  				:finished-text="$t('finishedText')"
  				@load="init"
			>
					<ul v-for="item of list" @click="goDetail(item)">
						<div class="left">
							<p class="name">
								{{pageState==1?item.name:userName}}
								<span v-if="item.type==2">{{$t('redPackage18')}}</span>
							</p>
							<p class="time">{{item.time}}</p>
						</div>
						<div class="right">
							<p class="money">
								{{currentId!='DC'?(typeof item.amt==='number'?item.amt.toFixed(currentId=='BTC'?8:2):item.amt):item.amt}}  <span>{{currentId}}</span>
							</p>
							<p class="best" v-if="pageState==1 && item.max"><img src="../../static/images/redpacket/red_open_champion.png">{{$t('redPackage13')}}</p>
							<p class="best2" v-if="pageState==2">
								<!-- 已过期 -->
								<span v-if="item.expired">{{$t('redPackage14')}}</span>
								<!-- 已抢完 -->
								<span v-else-if="item.get_nums == item.total_nums">{{$t('redPackage15')}}</span>
								<span>{{item.get_nums}}/{{item.total_nums}}</span>
							</p>
						</div>
					</ul>
		    		<div class="empty" v-if="list.length===0 && finished">
		    			<p class="desc">{{$t('redPackage16')}}</p>
		    		</div>
			</van-list>
		</div>
		<!-- 币种筛选 -->
		<van-action-sheet 
			class="iconBox" 
			:class="{isIphoneX:isIphoneX}"
			v-model="iconShown" 
			:actions="coinsList" 
			:cancel-text="$t('cancel')" 
			@select="selectIcon" 
		/>
	</div>
</template>
<script src="./redHistory.js"></script>
<style scoped lang="scss">
	@import './redHistory.scss';
</style>
<style>
	.noDataRedHistory .van-list__finished-text{
		display: none;
	}
</style>